iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
Modern Web

菜鳥網頁基礎系列 第 13

菜鳥網頁基礎 DAY13

  • 分享至 

  • xImage
  •  

接下來我們就要除錯,非常的簡單,就是只要去調整我們 CSS 就好。
https://ithelp.ithome.com.tw/upload/images/20200923/20129535OhwkxKu5JS.png

https://ithelp.ithome.com.tw/upload/images/20200923/20129535jmymlgmqtk.png

我們是 card-title 和 card-content 因為瀏覽器有幫我們預設好 CSS,所以我們要去針對這兩個 class 調整。
我們可以直接把所有的 margin 和 padding 都設為零,用 * (星號)符號讓所有標籤的 CSS 樣式。

* {
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

https://ithelp.ithome.com.tw/upload/images/20200923/20129535E93BvP1dTp.png
上面這張圖是有設 padding 和 margin 為 0

https://ithelp.ithome.com.tw/upload/images/20200923/20129535wimdioeQN9.png
上圖是沒有設 padding 和 margin 為 0

兩者應該有很明顯的差異,但有個地方不明顯,那就是最外圍那圈

https://ithelp.ithome.com.tw/upload/images/20200923/20129535Sw78qxkfmR.png
外面藍色螢光筆塗起來的那圈也是瀏覽器的預設,他會幫我們把東西留縫隙,還蠻醜的,所以我們會直接用星號把所有 padding 和 margin 設為 0,然後自己再去調整自己。


* {
    /* border: 1px solid black; */
    margin: 0;
    padding: 0;
}
 
.card {
    width: 350px;
}
 
.card-img {
    width: 100%;
    display: block;
}
 
.card-title {
    padding-left: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
}
 
.card-content {
    padding-left: 15px;
}

https://ithelp.ithome.com.tw/upload/images/20200923/201295352b8Gj39yOr.png

我調整了一下就變這樣了,我給了 img display:block 把此元素變成區塊,下面的空行就會不見,然後我給了他們區塊重新設定 padding 和 margin,調整上下左右的 margin 和 padding 有快速的寫法,margin:上 右 下 左,padding 也是一樣,然後我把外框拿掉了。

https://ithelp.ithome.com.tw/upload/images/20200923/20129535TqAn7xO2HP.png
上圖是還沒有設定 display:block

https://ithelp.ithome.com.tw/upload/images/20200923/20129535hLCY2Oj4Dl.png
上圖已經設定了display:block

.card-title {
    padding-left: 15px;
    /* margin-bottom: 15px;
    margin-top: 15px; */
    margin: 15px 0 15px 0;
}
 

它們設定是一樣的,然後 0可以不用加 px

接下來我們就把卡片變好看吧,給他陰影、圓角

* {
    /* border: 1px solid black; */
    margin: 0;
    padding: 0;
}
 
.card {
    width: 350px;
    margin-top: 20px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.5);
                /* x軸 y軸 模糊度 rgb的0.5是透明度 */
    border-radius: 15px ;
    overflow: hidden;
    /* 把內部超出邊界的內容隱藏 */
}
 
.card-img {
    width: 100%;
    display: block;
}
.card-title {
        padding-left: 15px;
        /* margin-bottom: 15px;
        margin-top: 15px; */
        margin: 15px 0 15px 0;
        /*  margin: 15px 0 15px 0;  上 右 下 左*/
    }
    
.card-content {
    padding-left: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    /* padding: 0 15px 15px 15px;  上 右 下 左*/
}

https://ithelp.ithome.com.tw/upload/images/20200923/2012953576efxwtQoK.png
上圖使用 overflow:hidden;

https://ithelp.ithome.com.tw/upload/images/20200923/20129535Gq0UDoLgwe.png
上圖沒有使用overflow:hidden;

這樣簡單的給他一些樣式是不是就變好看了


上一篇
菜鳥網頁基礎 DAY12
下一篇
菜鳥網頁基礎 DAY14
系列文
菜鳥網頁基礎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言